
(function ($) {


    $.extend($.fn, {
        convert: {
            defaults: {
                unitIcon: {
                    "READ_JDBC": {
                        "menuIcon": "icon-read-jdbc",
                        "stepIcon": "step-icon-read-jdbc"
                    },
                    "WRITE_JDBC": {
                        "menuIcon": "icon-write-jdbc",
                        "stepIcon": "step-icon-write-jdbc"
                    },
                    "SCRIPT_SQL": {
                        "menuIcon": "icon-script-sql",
                        "stepIcon": "step-icon-script-sql"
                    },
                    "XML": {
                        "menuIcon": "icon-xml",
                        "stepIcon": "step-icon-xml"
                    },
                    "JSON": {
                        "menuIcon": "icon-json",
                        "stepIcon": "step-icon-json"
                    },
                    "TO_SAP": {
                        "menuIcon": "icon-sap",
                        "stepIcon": "step-icon-sap"
                    }
                },
                onDblclick: function (e,step) {
                    var stepId = step.stepId;
                    var convertId = step.convertId;
                    var describe = step.describe;
                    var menuIcon = $.fn.convert.defaults.unitIcon[step.unitType].menuIcon;

                    var win = $('<div id="win_'+stepId+'" class="step-edit-win"></div>');
                    win.appendTo($("#design"));
                    win.window({
                        width: 800,
                        height:540,
                        collapsible:false,
                        minimizable:false,
                        maximizable:false,
                        modal: true,
                        title: describe,
                        iconCls:menuIcon,
                        href: './step.html',
                        onOpen:function () {
                            console.log('--onOpen');
                            console.log(this);
                            console.log($(this).window('body'))
                        },
                        onBeforeLoad:function () {
                            console.log('--onBeforeLoad');
                            console.log($(this).window('body'))

                        },
                        onLoad:function () {
                            console.log('--onLoad');
                            console.log($(this).window('body'))

                        },

                    });
                }
            },
            methods: {
                open: function (menus) {
                    var that = this
                    $("body").layout().layout('add', {
                        id: 'design',
                        title: '设计器',
                        region: 'center',
                    }).layout('add', {
                        id: 'menu',
                        region: 'west',
                        width: 150,
                        title: '转换组件'
                    });
                    var body = $("#menu").panel('body');
                    $.each(menus, function (i, menu) {
                        var unitIcon = $.fn.convert.defaults.unitIcon;
                        var unitType = menu.unitType;
                        var menuIcon = unitIcon[unitType].menuIcon;
                        let id = 'menu-' + i;
                        var amenu = $('<div class="design-menu-item"><a id="' + id + '">' + menu.title + '</a></div>');
                        amenu.linkbutton({
                            iconCls: menuIcon,
                            plain: true,
                            onClick: function () {
                                console.log(this)
                                console.log($(this).data('unitType'))
                                newUnitReadJdbc();
                            }
                        }).data('unitType', menu.unitType)
                        ;
                        amenu.appendTo(body)
                    });
                },
                openDesign: function (steps) {
                    var that = this;
                    $.each(steps, function (i, step) {
                        var stepIcon = $.fn.convert.defaults.unitIcon[step.unitType].stepIcon;
                        var astep = $('<div id=' + step.stepId + ' class="design-step">' +
                            '<div class="step-icon ' + stepIcon + '"></div>' +
                            '<div class="step-title">' + step.describe + '</div>' +
                            '</div>').data(step);
                        astep.appendTo($("#design"));
                        astep.css({left: step.x, top: step.y}).draggable({
                            onEndDrag: function (e) {
                                var astep = $(this);
                                var left = astep.css('left');
                                var x = left.substring(0, left.lastIndexOf('px'));
                                var top = astep.css('top');
                                var y = top.substring(0, top.lastIndexOf('px'));
                                astep.data('x', parseInt(x));
                                astep.data('y', parseInt(y));
                                var stepId = astep.data('stepId');
                                var fromStepId = astep.data('fromStepId');
                                if (fromStepId) {
                                    that.stepLine(fromStepId, stepId);
                                }
                                var toStepId = astep.data('toStepId');
                                if (toStepId) {
                                    that.stepLine(stepId, toStepId);
                                }

                            },
                        }).dblclick(function () {
                            $.fn.convert.defaults.onDblclick(this,step)
                        });
                        if (step.fromStepId) {
                            that.stepLine(step.fromStepId, step.stepId);
                        }
                    })
                },
                stepLine: function (fromStepId, toStepId) {
                    var that = this
                    var lineId = fromStepId + '-' + toStepId;
                    var from = $('#' + fromStepId);
                    var fromX = from.data('x');
                    var fromY = from.data('y');
                    var to = $('#' + toStepId);
                    var toX = to.data('x');
                    var toY = to.data('y');
                    var top = fromY + 17;
                    var left = fromX + 34;
                    var width = toX - fromX - 34 - 10;
                    var line = $('#' + lineId);
                    if (line[0]) {
                        line.css({left: left, top: top, width: width});
                    } else {
                        from.data('toStepId', toStepId);
                        to.data('fromStepId', fromStepId);
                        if (fromY === toY) {
                            line = $('<div id=' + lineId + ' class="step-line"></div>');
                            line.css({left: left, top: top, width: width})
                                .data({fromStepId: fromStepId, toStepId: toStepId})
                                .appendTo($('#design'));
                        }
                    }


                },
                addStep: function (step) {

                }
            }
        }
    });

})(jQuery);



